<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>hello react</title>
</head>

<body>
<div id="test"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">

    class Weather extends React.Component {
        //构造器调了几次？
        //1次
        constructor(props) {
            super(props)
            //初始化状态
            this.state = {isHot: true}

            //解决changeWeather中this的指向问题
            this.changeWeather = this.changeWeather.bind(this)
        }

        render() {
            const {isHot} = this.state
            return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '寒冷'}</h1>
        }

        changeWeather() {
            //获取原来的isHot值
            const isHot = this.state.isHot

            console.log(this);
            //状态必须通过setState修改，且更新是一种合并，不是替换~
            this.setState({isHot: !isHot})


            //严重注意：状态（state）不可直接更改。
            // this.state.isHot = !isHot


        }

    }

    ReactDOM.render(<Weather/>, document.getElementById('test'))


</script>
</body>

</html>
